<template>
  <el-dialog
    customClass="customWidth"
    :visible.sync="visible"
    @close="$emit('update:show', false)"
    :show="show"
    :destroy-on-close ="true"
  >
    <el-col style="margin-bottom: 20px">
      <el-radio
        v-for="(index, i) in title"
        :key="index"
        v-model="radio"
        :label="i"
        @change="change"
        >{{ index }}</el-radio
      >
    </el-col>
    <el-alert style="background: #e6f7ff" :closable="false">
      <span style="color: #64736c">已选择</span>
      <span style="color: #519df8">00</span>
      <span style="padding-right: 1.3571rem; color: #64736c">项</span>
      <span style="color: #519df8; cursor: pointer" @click="clear()">清空</span>
    </el-alert>
    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      :cell-style="cellStyle"
      highlight-current-row
      :header-cell-style="{
        background: '#2B69A6',
        color: '#fff',
        borderColor: '#BDE1FC',
      }"
      tooltip-effect="dark"
      style="width: 100%; margin-top: 0.8571rem"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="序号" type="index" width="80" align="center">
      </el-table-column>
      <el-table-column prop="gjcd" label="专家姓名" align="center" width="200">
        <template slot-scope="scope">
          <div class="input-box">
            <el-input
              size="small"
              v-model="scope.row.description"
              @blur="handleInputBlur(scope.$index, scope.row)"
            ></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="scnr" label="审查内容" align="center">
      </el-table-column>
      <el-table-column prop="scjl" label="审查结论" align="center" width="200">
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="ok">确 定</el-button>
    </div>
  </el-dialog>
</template>
 
<script>
import { xiugaizxyj } from "api/jscsdpg.js";
export default {
  data() {
    return {
      radio: 0,
      scope: null,
      searchFrom: {
        name: "",
        time: [],
      },
      tableData: null,
      multipleSelection: [],
      visible: this.show,
      nr: null,
      title: null,
      index: 0,
    };
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: null,
    },
    resd: {
      type: Object,
      default: null,
    },
  },
  watch: {
    show() {
      this.visible = this.show;
    },
    resd() {
        console.log(this.resd);
        let t= []
        let n = []
        for(let i in this.resd.zjfxyj)
        {   
            t.push(i)
            n.push(this.resd.zjfxyj[i])
        }
        this.title = t
        this.nr = n
        console.log(this.nr);
         this.tableData = this.nr[0];
    },
  },
  methods: {
    change(val) {
      this.index = val;
      this.tableData = null;
      this.tableData = this.nr[val];
    },
    disheader({ row, colum, rowindex, columindex }) {
      if (rowindex == 1) {
        return { display: "none" };
      }
    },
    cellStyle() {
      return "border-color:#BDE1FC;";
    },
    //input框失去焦点事件
    handleInputBlur: function (v, b) {
        let  a = 0
        for(let i in this.resd.zjfxyj)
        {   a=a+1;
            if(this.index+1 == a){
                 this.resd.zjfxyj[i][v].zjmc = b.description
                 console.log(b.description);
                 console.log(this.resd);
            }
        }
        // console.log(a,b);
    //   this.resd[this.index].zjyjs[a].zjmc = b.description;
    //   console.log(this.resd);
      // console.log(this.resd);
      //当 input 失去焦点 时,input 切换为 span，并且让下方 表格消失（注意，与点击表格事件的执行顺序）
    },

    handleSelectionChange(val) {
      this.multipleSelection = [];
      var _this = this;
      val.forEach(function (item) {
        _this.multipleSelection.push(item);
      });
    },
    close() {
        this.tableData = null
      this.$emit("close");
    },
    ok() {
        console.log('+++++++=');
      xiugaizxyj(this.id,{zjfxyj: this.resd.zjfxyj}).then((res) => {
        console.log(res);
      });
      this.$emit("ok", this.multipleSelection);
    },
  },
  mounted() {},
};
</script>
 <style>
.customWidth {
  width: 80%;
}
</style>
